<template>
	<scroll-view scroll-y @scrolltolower="getList" @refresherrefresh="getList(true)" :refresher-enabled="true"
		:refresher-triggered="refresherTriggered">
		<nodata class="nodata" v-if="isData"></nodata>
		<view class="search-box">
			<view class="input-box">
				<uni-datetime-picker :end="searchEndDate" start-placeholder="起始日期" end-placeholder="终止日期"
					v-model="rangeDate" type="daterange" />
			</view>
			<view class="search-btn uni-icon" @click="getList(true)">
				&#xe466;
			</view>
		</view>
		<view class="waybill-box">
			<waybill-item class="waybill-item" v-for="(item,index) in list" :key="index" :map="item">
				<view v-if="item.taskState=='0'" class="waybill-btn">
					<view class="btn" @click="clickCopy(item)">
						<text>复制</text>
					</view>
				</view>

				<view v-if="item.taskState=='1'" class="waybill-btn">
					<view class="btn">
						<text>修改</text>
					</view>
					<view class="btn">
						<text>确认</text>
					</view>
					<view class="btn" @click="clickCopy(item)">
						<text>复制</text>
					</view>
					<view class="btn" @click="clickCancel(item)">
						<text>取消</text>
					</view>
				</view>


				<view v-if="item.taskState=='2'" class="waybill-btn">

					<view class="btn" @click="clickCopy(item)">
						<text>复制</text>
					</view>
					<view class="btn" @click="clickCancel(item)">
						<text>取消</text>
					</view>
				</view>


				<view v-if="item.taskState=='3'" class="waybill-btn">

					<view class="btn" @click="clickCopy(item)">
						<text>复制</text>
					</view>
					<view class="btn" @click="clickCancel(item)">
						<text>取消</text>
					</view>
					<view class="btn" @click="clickCheck(item)" v-if="item.preCheck==false">
						<text>出车前检查</text>
					</view>
				</view>


				<view v-if="item.taskState=='4'||item.taskState=='5'" class="waybill-btn">

					<view class="btn" @click="clickCopy(item)">
						<text>复制</text>
					</view>

				</view>


				<view
					v-if="item.taskState!='1'&&item.taskState!='0' &&item.taskState!='2'&&item.taskState!='3'&&item.taskState!='4'&&item.taskState!='5'"
					class="waybill-btn">

					<view class="btn" @click="clickCopy(item)">
						<text>复制</text>
					</view>

					<view class="btn" @click="clickCancel(item)">
						<text>取消</text>
					</view>

				</view>


			</waybill-item>
			<view class="get-more" v-show="getMoreStatus">
				<text>正在加载更多。。。</text>
			</view>
		</view>
		<modal-cancel-btn :visible.sync="checkCancelConfirm" @confirm="checkNoChange" :data="cancelDialogMap">
		</modal-cancel-btn>
	</scroll-view>
</template>

<script>
	import waybillItem from "@/components/tool-card/task_item.vue"
	import modalCancelBtn from '@/components/tool-modal/modal-cancelBtn.vue';
	import nodata from '@/components/nodata.vue'
	import store from "@/store/index"
	import {
		dateFormat
	} from "@/common/util.js"
	export default {
		components: {
			waybillItem,
			nodata,
			modalCancelBtn
		},
		props: ['tabIndex'],
		data() {
			return {
				cancelDialogMap: {
					consignSquareName: '',
					taskName: '',
					estimateLoadingTime: '',
					estimateUnloadingTime: '',
					type: '', //type 1是取消 2是删除
				},
				checkCancelConfirm: false,
				isData: false,
				current: 1,
				refresherTriggered: false,
				getMoreStatus: false,
				list: [],
				searchEndDate: new Date().getTime(),
				rangeDate: [],
				params: {},
			};
		},
		methods: {
			//出车前检查
			clickCheck(item) {
				var trailerId = item.trailerId == '' ? '' : item.trailerId
				var trailerVehCode = item.trailerVehCode == '' ? '' : item.trailerVehCode
				this.$goBack('/pages/waybill/inspect/out-car?taskId=' + item.taskId +
					'&vehCode=' + item.vehCode +
					'&vehId=' + item.vehId +
					'&trailerId=' + trailerId +
					'&trailerVehCode=' + trailerVehCode +
					'&type=1')
			},
			//取消按钮
			clickCancel(item) {
				this.cancelDialogMap.consignSquareName = item.consignSquareName
				this.cancelDialogMap.taskName = item.taskName
				this.cancelDialogMap.estimateLoadingTime = item.estimateLoadingTime
				this.cancelDialogMap.estimateUnloadingTime = item.estimateUnloadingTime
				this.cancelDialogMap.id = item.id
				this.cancelDialogMap.taskId = item.taskId
				this.cancelDialogMap.type = '1'
				this.checkCancelConfirm = true
			},
			checkNoChange(data) {
				if (data.type == '1') { //是取消
					this.$api.taskCancel({
						'id': data.id,
						"taskId": data.taskId,
						'cancelReson': data.checkReason,
						'taskState': '0',
					}).then(res => {
						if (res.data.code == 200) {
							this.list = []
							this.getNetData()
						}
					}).catch(res => {

					})
				} else if (data.type == '2') { //是删除
					this.$api.taskCancel({
						'id': data.id,
						"taskId": data.taskId,
						'cancelReson': data.checkReason,
						'taskState': '0',
					}).then(res => {
						if (res.data.code == 200) {
							this.list = []
							this.getNetData()
						}
					}).catch(res => {})
				}
			},
			//复制按钮
			clickCopy(item) {
				this.$goBack('./create_task?dispCheckId=' + item.dispCheckId +
					'&taskId=' + item.taskId +
					'&id=' + item.id +
					'&page=2', 2)
			},
			getNetData() {
				if (this.timer) {
					return;
				}
				this.timer = setTimeout(() => {
					this.timer = false
				}, 1000)
				const params = {
					...this.params,
					current: this.current,
				}
				// console.log(params);
				// return;
				this.$api.qyTaskList(params)
					.then(res => {
						this.timer = false
						if (res.data.code == 200) {
							var listData = res.data.data.records
							this.total = res.data.data.total
							this.list = this.list.concat(listData)
							if (this.list.length == 0) {
								this.isData = true;
							} else {
								this.isData = false;
							}
							// 向父组件传递了两个值
							// this.$emit('change', this.total);
							this.$emit('input', this.total);
						}
					}).catch(() => {
						this.timer = false
					});
			},
			initParams() {
				if (this.tabIndex == 0) {
					var ecertTaskState = ""
				} else if (this.tabIndex == 1) {
					var ecertTaskState = "1"
				} else if (this.tabIndex == 2) {
					var ecertTaskState = "2"
				} else if (this.tabIndex == 3) {
					var ecertTaskState = "3"
				}
				if (!this.rangeDate || this.rangeDate.length == 0) {
					this.rangeDate = [dateFormat(new Date(), "YYYY-mm-dd")];
					let newDate = new Date();
					newDate.setMonth(newDate.getMonth() - 1);
					this.rangeDate.unshift(dateFormat(new Date(newDate), "YYYY-mm-dd"));
					// this.rangeDate[0] = "2023-03-14"
				}
				this.params = {
					position: "",
					size: '10',
					personType: store.getters.getUserType,
					ecertTaskState: ecertTaskState,
					empInfoId: store.getters.getUserType == 1 ? store.getters.getEmpInfoId : "",
					taskState: "",
					startDate: this.rangeDate[0] + ' 00:00:00',
					endDate: this.rangeDate[1] + ' 23:59:59',
				};
			},
			// 加载，刷新
			getList(isRefresh = false) {
				// console.log(isRefresh);
				if (isRefresh === true) {
					this.list = [];
					this.current = 1;
					this.initParams();
					this.refresherTriggered = true
					setTimeout(() => {
						this.getNetData()
						this.refresherTriggered = false;
					}, 100)
				} else {
					this.getMoreStatus = true;
					setTimeout(() => {
						if (this.list.length != this.total) {
							this.current++
							this.getNetData()
						}
						this.getMoreStatus = false
					}, 100)
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.getList(true);
			});
		},
	}
</script>

<style lang="scss" scoped>
	.nodata {
		padding-top: 250rpx;
		margin: 0rpx auto;
	}

	.search-box ::v-deep {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 30rpx;
		position: fixed;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;
		background-color: #fff;

		.input-box {
			flex: 1;

			.uni-date__x-input {
				height: 28px !important;
			}

			.uni-date__icon-clear {
				border-width: 0;
				bottom: 0;
				padding: 0 10rpx;
				display: flex;
				align-items: center;

				.uni-icons {
					font-size: 18px !important;
				}
			}
		}

		.search-btn {
			padding-left: 20rpx;
			color: #666666;
			font-size: 40rpx;
		}
	}

	.waybill-box {
		padding: 140rpx 0 84rpx;
		position: relative;

		.waybill-item {
			margin-bottom: 20rpx;

			.waybill-btn {
				text-align: right;

				padding: 35rpx;

				.btn {
					display: inline-block;
					line-height: 1em;
					font-size: 28rpx;
					padding: 0.4em 1em;
					border: 3rpx solid $app-color;
					border-radius: 30rpx;
					margin-left: 15rpx;

					text {
						color: $app-color;
					}
				}
			}
		}

		.get-more {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			line-height: 3em;
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>